<template>
  <!-- 选项卡 -->
  <van-grid :border="false" class="home-grid" :clickable="true">
    <van-grid-item @click="wholeRent">
      <div class="grid">
        <van-image :src="require('@/assets/images/2.png')" />
        <span slot="text" class="text">整租</span>
      </div>
    </van-grid-item>
    <van-grid-item @click="jointRent">
      <div class="grid">
        <van-image :src="require('@/assets/images/4.png')" />
        <span slot="text" class="text">合租</span>
      </div>
    </van-grid-item>
    <van-grid-item @click="$router.push('/map')">
      <div class="grid">
        <van-image :src="require('@/assets/images/3.png')" />
        <span slot="text" class="text">地图找房</span>
      </div>
    </van-grid-item>
    <van-grid-item @click="$router.push('/rent/add')">
      <div class="grid">
        <van-image :src="require('@/assets/images/1.png')" />
        <span slot="text" class="text">去出租</span>
      </div>
    </van-grid-item>
  </van-grid>
</template>

<script>
export default {
  name: 'FunctionOptions',
  methods: {
    // 整租
    wholeRent() {
      this.$router.push('/home/list')
      this.$store.commit('SET_RENT_TYPE', true)
    },
    // 合租
    jointRent() {
      this.$router.push('/home/list')
      this.$store.commit('SET_RENT_TYPE', false)
    }
  }
}
</script>

<style scoped lang="less">
// 选项卡
.home-grid {
  justify-content: space-between;
  .van-grid-item {
    .van-grid-item__content {
      padding: unset;
      .grid {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        .van-image {
          width: 60px;
          height: 60px;
        }
        .text {
          font-size: 14px;
          margin: 11.62px 0;
        }
      }
    }
  }
}
</style>
